<script setup lang="ts">
import { ref, nextTick } from 'vue'
import dzjz from '../../dzjz/index.vue'
import dzjzwjgl from '../../dzjzwjgl/index.vue'
import TreeUtilDTO from '@/utils/tree'
import { cloneDeep } from 'lodash'
import wsjzglService from '@/api/wsjzgl'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
const route = useRoute()
const emit = defineEmits(['refresh'])
// 组件实例
const dzjzRef = ref()
const dzjzwjglRef = ref()
const dialogVisible = ref(false)
const ajNode = ref()
const openDialog = (node: any) => {
  ajNode.value = node
  dialogVisible.value = true
  nextTick(() => {
    dzjzRef.value?.init()
  })
}

// 电子卷宗传递过来的方法
const dzjzList = ref<any[]>([])
const dzjzNodeClick = (data: any, list: any[]) => {
  if (!data.fmlbh) return
  if (data.cj === '2') {
    const index = list.findIndex((el) => el.mlbh === data.mlbh)
    dzjzList.value = list
    nextTick(() => {
      getDzjzList(data, index)
    })
  }
}

const checkDzjzList = ref<any[]>([])
const dajzNodeCheck = (list: any[]) => {
  const tempList = cloneDeep(list).filter((el) => {
    if ((el.cj === '1' && el.children.length && el.children[0].cj === '2') || el.cj === '2') {
      return true
    }
    return false
  })
  tempList.forEach((el) => {
    delete el.children
  })
  checkDzjzList.value = TreeUtilDTO.getTreeData(tempList, 'mlbh', 'fmlbh')
}
const dzjzIndexChange = (node: any) => {
  dzjzRef.value?.handleCheckNode(node, true)
}
// 获取电子卷宗文件
const getDzjzList = (data: any, index: number) => {
  dzjzwjglRef.value?.getDzjzPdf(data, index)
}

// 获取电子卷宗目录信息
const loading = ref(false)
const queryDzjzMlxx = () => {
  loading.value = true
  const params = {
    dwbm: route.query.cbdwbm,
    dzjzmlList: checkDzjzList.value.map((dzjz) => ({
      mlbh: dzjz.mlbh,
      wjxxList: dzjz.children.map((wj: any) => ({
        wjhz: wj.wjhz,
        wjxh: wj.wjxh,
      })),
    })),
  }
  wsjzglService
    .queryDzjzMlxx(params)
    .then((res) => {
      tableData.value = (res.data || []).map((dzjz: any) => {
        const checkDzjz = checkDzjzList.value.find((jz) => jz.mlbh === dzjz.mlbh)
        return {
          mlmc: checkDzjz.mlxsmc,
          mlbh: dzjz.mlbh,
          mlscrq: dzjz.rq,
          wh: dzjz.wh,
          zrz: dzjz.zrz,
          wjxhList: checkDzjz.children.map((el: any) => el.wjxh),
        }
      })
      step.value++
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}
const step = ref(1)
const createLoading = ref(false)
const next = () => {
  queryDzjzMlxx()
}
const cancel = () => {
  if (step.value === 1) {
    dialogVisible.value = false
  } else {
    step.value--
  }
}

const tableData = ref<any[]>([])

const save = () => {
  const params = {
    ajbh: ajNode.value?.bh,
    dwbm: route.query.cbdwbm,
    mlList: tableData.value,
  }
  wsjzglService
    .saveDzjzmlxx(params)
    .then(() => {
      ElMessage.success('保存成功')
      dialogVisible.value = false
      emit('refresh')
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}
const closeDialg = () => {
  step.value = 1
}
defineExpose({ openDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="挂接电子卷宗"
    width="70%"
    :close-on-click-modal="false"
    @close="closeDialg"
  >
    <div class="dialog-content">
      <div class="left-tree">
        <dzjz
          ref="dzjzRef"
          :check-disabled="step !== 1"
          showCheckbox
          @nodeCheck="dajzNodeCheck"
          @nodeClick="dzjzNodeClick"
        ></dzjz>
      </div>
      <div class="right-edit">
        <dzjzwjgl
          v-if="step === 1"
          :showTab="false"
          ref="dzjzwjglRef"
          :dzjzList="dzjzList"
          @indexChange="dzjzIndexChange"
        ></dzjzwjgl>
        <el-table v-else height="100%" :data="tableData" v-loading="createLoading">
          <el-table-column type="index" label="序号" width="55" />
          <el-table-column label="题名" min-width="240">
            <template #default="scope">
              <el-input v-model="scope.row.mlmc" maxlength="30" />
            </template>
          </el-table-column>
          <el-table-column label="文号" min-width="140">
            <template #default="scope">
              <el-input v-model="scope.row.wh" />
            </template>
          </el-table-column>
          <el-table-column label="责任者" min-width="140">
            <template #default="scope">
              <el-input v-model="scope.row.zrz" />
            </template>
          </el-table-column>
          <el-table-column label="日期" min-width="160">
            <template #default="scope">
              <el-date-picker
                style="width: 100%"
                v-model="scope.row.mlscrq"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择日期"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" v-if="step === 1" :loading="loading" @click="next"
          >下一步</el-button
        >
        <el-button type="primary" v-else @click="save">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.dialog-content {
  display: flex;
  height: 70vh;
  .left-tree {
    width: 300px;
    border: 1px solid #dae4f1;
    margin-right: 10px;
    overflow-y: auto;
  }
  .right-edit {
    flex: 1;
    border: 1px solid #dae4f1;
  }
}
</style>
